<template>
  <div class="nav_flex">
    <div class="nav">
      <!--      logo-->
      <router-link to="/">
        <img class="nav_logo" src="../../assets/nav/logo.png" alt="">
      </router-link>
      <!--      导航-->
      <div class="nav_list">
        <div class="nav_list_txt" v-for="(i,index) in navData" :key="index">
          <router-link style="text-decoration:none;color: black" :to="i.index">
            {{ i.name }}
          </router-link>
        </div>
      </div>
      <!--      搜索-->
      <div class="nav_search" @mouseleave="btnLeave">
        <!--        搜索框-->
        <div :class="isLook === 1 ? 'nav_search_input' : 'nav_search_input2'">
          <input @mouseenter="btnEnter" @blur="btnOnBlur" @click="btnOnFocus"
                 placeholder="输入商品名或货号" type="text">
          <span></span>
        </div>
        <!--        换一批-->
        <div :class="isClassLook1 === 2 ? 'nav_search_change' : 'nav_search_change0'" v-if="isLook1 === 2">
          <div class="nav_search_change1">
            <span class="nav_search_change1_span1">热门搜索</span>
            <span class="nav_search_change1_span2">换一批</span>
          </div>
          <div class="nav_search_change2">
            <div class="nav_search_change2_list" v-for="(i,index) in classData" :key="index">{{ i.name }}</div>
          </div>
        </div>
      </div>
      <!--      购物车-->
      <div class="nav_shopping">
        <img src="../../assets/nav/shopping.png" alt="">
        <span>购物车</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      classData: [
        {
          name: '香薰机'
        }, {
          name: '沙发'
        }, {
          name: '羽绒被'
        }, {
          name: '化妆水'
        }, {
          name: '羽绒'
        }, {
          name: '夹克'
        }, {
          name: '大衣'
        }, {
          name: '双肩包'
        }, {
          name: '睫毛夹'
        }, {
          name: '运动鞋'
        },
      ],
      isLook: 1,
      isLook1: 1,
      isClassLook1: 1,
    }
  },
  mounted() {

  },
  methods: {
    // 失去焦点
    btnOnBlur() {
      // 边框颜色还原
      this.isLook = 1
    },
    // 得到焦点通过点击事件触发
    btnOnFocus() {
      // 边框颜色改变
      this.isLook = 2
    },
    // 移入移除事件
    btnEnter() {
      // 移入弹出弹框
      this.isLook1 = 2
      this.isClassLook1 = 2
    },
    btnLeave() {
      this.isClassLook1 = 1
      // 移除收回弹框
      setTimeout(function () {
        this.isLook1 = 1
      }.bind(this), 300)
    }
  }
}
</script>

<style lang="less" scoped>
.nav_flex {
  //position: fixed;
  //top: 0;
  //right: 0;
  //left: 0;
  //z-index: 10;
  border-bottom: 1px solid #e3e3e3;
}

.nav {
  display: flex;
  align-items: center;
  width: 78%;
  margin: 0 auto;

  .nav_logo {
    display: block;
    width: 145px;
    height: 60px;
    margin-right: 5%;
    cursor: pointer;
  }

  .nav_list {
    margin-left: 2%;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;

    .nav_list_txt {
      margin: 0 18px 0 18px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
    }
  }

  .nav_search {
    margin-left: 8%;
    margin-right: 3%;

    .nav_search_input2 {
      display: flex;
      border: 1px solid #7f0019;
      border-radius: 3px;

      input {
        border: none;
        border-radius: 3px;
        width: 348px;
        padding-left: 15px;
        font-size: 14px;
        font-weight: 600;
        color: black;
        outline: none; //去掉input点击后边框颜色
      }

      /*修改提示文字的颜色*/

      input::-webkit-input-placeholder { /* WebKit browsers */
        color: #999999;
      }

      span {
        width: 39px;
        height: 38px;
        display: block;
        background-image: url('../../assets/nav/search.png');
        background-repeat: no-repeat;
        background-size: cover;
        border-left: 1px solid #e3e3e3;
      }
    }

    .nav_search_input {
      display: flex;
      border: 1px solid #e3e3e3;
      border-radius: 3px;

      input {
        border: none;
        border-radius: 3px;
        width: 348px;
        padding-left: 15px;
        font-size: 14px;
        font-weight: 600;
        color: black;
        outline: none; //去掉input点击后边框颜色
      }

      /*修改提示文字的颜色*/

      input::-webkit-input-placeholder { /* WebKit browsers */
        color: #999999;
      }

      span {
        width: 39px;
        height: 38px;
        display: block;
        background-image: url('../../assets/nav/search.png');
        background-repeat: no-repeat;
        background-size: cover;
        border-left: 1px solid #e3e3e3;
      }
    }

    /* 动画代码 */
    @keyframes example {
      from {
        transform: translate(0, 30%);
      }
      to {
        transform: translate(0, 0);
      }
    }

    /* 动画代码 */
    @keyframes example1 {
      from {
        transform: translate(0, 0);
      }
      to {
        transform: translate(0, 30%);
      }
    }

    .nav_search_change0 {
      z-index: 1000;
      position: absolute;
      background-color: #f2f2f2;
      border-radius: 3px;
      width: 360px;
      padding: 0 1.5%;
      animation-name: example1;
      animation-duration: 0.3s;


      .nav_search_change1 {
        display: flex;
        justify-content: space-between;
        margin-top: 3%;

        .nav_search_change1_span1 {
          font-size: 16px;
          font-weight: bold;
          color: black;
        }

        .nav_search_change1_span2 {
          font-size: 14px;
          font-weight: bold;
          color: #26b1d4;
          cursor: pointer;
        }
      }

      .nav_search_change2 {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 5%;

        .nav_search_change2_list {
          font-size: 13px;
          font-weight: 700;
          color: #585555;
          background-color: #fff;
          height: 30px;
          padding: 0 15px 0 15px;
          line-height: 30px;
          text-align: center;
          border-radius: 30px;
          margin-top: 5%;
          margin-right: 3%;
        }
      }
    }

    .nav_search_change {
      z-index: 1000;
      position: absolute;
      background-color: #f2f2f2;
      border-radius: 3px;
      width: 360px;
      padding: 0 1.5%;
      animation-name: example;
      animation-duration: 0.3s;

      .nav_search_change1 {
        display: flex;
        justify-content: space-between;
        margin-top: 3%;

        .nav_search_change1_span1 {
          font-size: 16px;
          font-weight: bold;
          color: black;
        }

        .nav_search_change1_span2 {
          font-size: 14px;
          font-weight: bold;
          color: #26b1d4;
          cursor: pointer;
        }
      }

      .nav_search_change2 {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 5%;

        .nav_search_change2_list {
          font-size: 13px;
          font-weight: 700;
          color: #585555;
          background-color: #fff;
          height: 30px;
          padding: 0 15px 0 15px;
          line-height: 30px;
          text-align: center;
          border-radius: 30px;
          margin-top: 5%;
          margin-right: 3%;
        }
      }
    }
  }

  .nav_shopping {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
      width: 24px;
      height: 24px;
    }

    span {
      display: inline-block;
      text-align: center;
      font-size: 12px;
      line-height: 17px;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>